<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<h:outputStylesheet library="css" name="styles.css"/>
	<title>#{msgs.browserTitle}</title>
</h:head>
<h:body>

	<h:form>
		<h:dataTable value="#{editableUserList.userList}" var="employee" styleClass="names" 
                      headerClass="namesHeader" columnClasses="lastName,firstName,password">
			<h:column><f:facet name="header">User ID</f:facet>
			#{employee.user.userID}
			</h:column>
			
			<h:column><f:facet name="header">First Name</f:facet>
				<h:inputText value="#{employee.user.firstName}" rendered="#{employee.editable}" size="10"/>
	            <h:outputText value="#{employee.user.firstName}" rendered="#{not employee.editable}"/>
			</h:column>
			
			<h:column><f:facet name="header">Last Name</f:facet>

				<h:inputText value="#{employee.user.lastName}" rendered="#{employee.editable}" size="10"/>
	            <h:outputText value="#{employee.user.lastName}" rendered="#{not employee.editable}"/>

			</h:column>
			<h:column><f:facet name="header">Password</f:facet>
				<h:inputText value="#{employee.user.password}" rendered="#{employee.editable}" size="10"/>
	            <h:outputText value="#{employee.user.password}" rendered="#{not employee.editable}"/>
			
			</h:column>
			
			<h:column>
				<f:facet name="header">Super User</f:facet>
				<h:selectBooleanCheckbox value="#{employee.user.superUser}" onclick="submit()" rendered="#{employee.editable}" size="10"/>
	            <h:outputText value="#{employee.user.superUser}" rendered="#{not employee.editable}"/>
			</h:column>
			
			
			
			<h:column>
				<f:facet name="header">Delete</f:facet>
				<h:commandButton value="Delete" action = "#{editableUserList.deleteRow(employee)}"/>
			</h:column>
			
			<h:column>
				<f:facet name="header">Edit</f:facet>			
				<h:commandButton value="Edit" action="#{editableUserList.edit(employee)}" rendered="#{not employee.editable}"/>
				<h:commandButton value="Save" action="#{editableUserList.save(employee)}" rendered="#{employee.editable}"/>
			</h:column>
			
		</h:dataTable>
		
	</h:form>
	
	<h:form>	
		<table>
	            <tr>
	               <td>First Name</td>
	               <td>Last Name</td>
	               <td>Password</td>	               
	            </tr>
	            <tr>
	               <td><h:inputText value="#{newEmployee.firstName}" required="true"/></td>
	               <td><h:inputText value="#{newEmployee.lastName}" required="true"/></td>
	               <td><h:inputText value="#{newEmployee.password}" required="true"/></td>
	            </tr>                        	            
	     </table>
	     <h:commandButton id="id_buttonAdd" value="#{messages.button_add}" action="#{newEmployee.addEmployee}" />
	     
	</h:form>
	<h:form>
		<h:commandButton id="id_commandLink" value="back" action="menu" />	
	</h:form>
		
</h:body>
</html>